var car_price_info=null;
var car_price_month=0;
function bindEvent_car_detail(){
    var mySwiper = new Swiper ('#car_detail_slide', {
        loop: true,
        pagination : '.swiper-pagination',
        paginationType : 'fraction'
    });
    $(".car_detail_tab_option").click(function(){
        var number=$(".car_detail_tab_option").index(this);
        $('.car_detail_tab_span').removeClass('active')
        $(this).find('.car_detail_tab_span').addClass("active");
        $(".car_detail_tab a span").parent().siblings().find("span").removeClass("active");
        $(".car_detail_tab_content_option:eq("+number+")").show();
        $(".car_detail_tab_content_option:eq("+number+")").siblings().hide();
    });
    
    $(".car_detail_years_title_more").click(function(){
        if($('#car_price_page').length>0){
            $('#car_price_page').remove();
        }
        $("body").append(html_content.car_price);
        $("#"+page_index[page_index.length-1]).hide();
        setPriceContent()
        mui('.mui-scroll-wrapper').scroll({
            deceleration: 0.005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006 
        });
        $("#car_price_page").show();
        page_index.push("car_price_page");
        $('body').attr('class','search_body');


    });

    function setPriceContent(){
        var content='<li>\
                        <span>期数</span>\
                        <span>月租金</span>\
                        <span>尾款</span>\
                        <!--<span>贷款期数</span>\
                        <span>VS指导价</span>-->\
                    </li>'
        for(var i in car_price_info){
            content+='<li class="Car_li">\
                        <span>'+car_price_info[i]["pay_month"]+'</span>\
                        <span>'+car_price_month+'元</span>\
                        <span>'+getMoneyText(car_price_info[i]["surplus_money"])+'元</span>\
                        <!--<span>'+car_price_info[i]["surplus_pay_month"]+'</span>\
                        <span>'+car_price_info[i]["preferential_ratio"]+'</span>-->\
                    </li>'
        }
        $('.Buy_car_month').html(content);
    }
    var tab=$(".car_detail_tab"); //得到导航对象
    var win=$(window); //得到窗口对象
    var sc=$(document);//得到document文档对象。
    win.scroll(function() {
        if (sc.scrollTop() >= 795) {
            tab.addClass("fixedtab");
        } else {
            tab.removeClass("fixedtab");
        }
    });

//        //获取要定位元素距离浏览器顶部的距离
//        var tabH = $(".car_detail_tab").offset().top;
//        var tab=$(".car_detail_tab");
//        //滚动条事件
//        $(window).scroll(function(){
//            //获取滚动条的滑动距离
//            var scroH = $(this).scrollTop();
//        //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
//            if(scroH>=tabH+50){
//                tab.addClass("fixedtab");
//            }else if(scroH<tabH+50){
//                tab.removeClass("fixedtab");
//            }
//        });
        
}
$("body").delegate(".config_detail","click",function(){
    var index=$(this).attr('index');
    $(".config_detail_option[index="+index+"]").slideToggle();
    $(this).find(".fa").toggleClass("fa-angle-down");
    $(this).find(".fa").toggleClass("fa-angle-up");
});
var carNum=null
function getDetailDate(carnum){
    carNum=carnum;
    var spinner = new Spinner();   
　　$.ajax({
        type: "POST",
        url: webConfig.url+"/Home/Index/getDetailDate",
        data: {carnum:carnum},
        dataType: "JSONP",
        crossDomain: true,
        beforeSend:function(){
            $('#loadingBox').removeClass('hidden')
            var target = document.getElementById('loadingBox');
            spinner.spin(target)
        },
        complete:function(){
            $('#loadingBox').addClass('hidden')
            spinner.spin()
        },
        success: function(data){
            car_price_info=data.carPrice;
            if(data.carData){
                data=data.carData   
                var title=''
                var first_class="";
                title="极速提车"
                var details=data['details']
                var name=data['name']
                var color=data['color']
                var guide_price=getMoneyText(data['guide_price'])
                var jdc_price=getMoneyText(data['jdc_price'])
                var first_pay=getMoneyText(data['first_pay'])
                var month_pay=parseInt(data['month_pay'])
                var next_pay=getMoneyText(data['next_pay'])
                var next_month_pay=parseInt(data['next_month_pay'])

                car_price_month=month_pay

                var image_content='';
                for(var i=1 ;i<=data['img_count'];i++){
                    var url=webConfig.ossUrl+"/Image/Cars/"+data['carnum']+"/"+i+".jpg"
                    image_content+='<div class="swiper-slide">\
                                        <a class="car_detail_slide_img_top_url"><img src="'+url+'"></a>\
                                    </div>'
                }
                var base_info_content='';
                if(data['base_info']){
                    var base_info=eval('(' + data['base_info'] + ')');
                    var last_class=""
                    for(var i =0; i<base_info.length;i++){
                        var reg=/无/g;
                            base_info[i][1]=base_info[i][1].replace(reg,'-');
                            var reg=/标配/g;
                            base_info[i][1]=base_info[i][1].replace(reg,'<i class="fa fa-circle black_i"></i>');
                            var reg=/有/g;
                            base_info[i][1]=base_info[i][1].replace(reg,'<i class="fa fa-circle"></i>');
                            var reg=/选配/g;
                            base_info[i][1]=base_info[i][1].replace(reg,'<i class="fa fa-circle-o"></i>');
                        base_info_content+='<div class="car_detail_device_option">\
                                                <div class="car_detail_device_option_left">\
                                                    <span>'+base_info[i][0]+'</span>\
                                                </div>\
                                                <div class="car_detail_device_option_right">\
                                                    <span>'+base_info[i][1]+'</span>\
                                                </div>\
                                                <div class="clearfix"></div>\
                                            </div>';
                    }
                }
                var config_spotlight_content='';
                if(data['config_spotlight']){
                        var config_spotlight=eval('(' + data['config_spotlight'] + ')');
                    for(var i =0; i<config_spotlight.length;i++){
                        config_spotlight_content+=' <div class="car_detail_device_good_option">\
                                                <a>\
                                                    <img src="images/'+config_spotlight[i]+'.png">\
                                                    <div><span>'+config_spotlight[i]+'</span></div>\
                                                </a>\
                                            </div>'
                    }
                }
                var models_spotlight_content='';
                if(data['models_spotlight']){
                    var models_spotlight=eval('(' + data['models_spotlight'] + ')');
                    for(var i =0; i<models_spotlight.length;i++){
                        var url=webConfig.ossUrl+"/Image/CarsLight/"+data['carnum']+"/"+(i+1)+".jpg"
                        models_spotlight_content+='<div class="car_detail_shape">\
                                                        <img src="'+url+'">\
                                                        <span class="car_detail_shape_tit">'+models_spotlight[i][0]+'</span>\
                                                        <span class="car_detail_shape_info">'+models_spotlight[i][1]+'</span>\
                                                    </div>'
                    }
                }
                var config_arr={"body_config":"车身配置","engine_config":"发动机配置","gearbox_config":"变速箱配置","chassis_steering":"底盘转向","wheel_brake":"车轮制动","safety_equip":"安全装备","control_config":"操控配置","outside_config":"外部配置","inside_config":"内部配置","chair_config":"座椅配置","multimedia_config":"多媒体配置", "light_config":"灯光配置","mirrors_config":"玻璃／后视镜","aircondition_config":"空调／冰箱","hightech_config":"高科技配置"}
                var config_content="";
                var index=1;
                var last_container_class=''
                for(var key in config_arr){
                    var config_info_content="";
                    if(data[key]){
                        var config_info=eval('(' + data[key] + ')');
                        var last_config_class=''
                        for(var i =0; i<config_info.length;i++){
                            if(i==config_info.length-1){
                                config_class=" "
                            }else{
                                config_class=" index_answer_car_detail_option_begin"
                            }
                            var reg=/无/g;
                            config_info[i][1]=config_info[i][1].replace(reg,'-');
                            var reg=/标配/g;
                            config_info[i][1]=config_info[i][1].replace(reg,'<i class="fa fa-circle black_i"></i>');
                            var reg=/有/g;
                            config_info[i][1]=config_info[i][1].replace(reg,'<i class="fa fa-circle black_i"></i>');
                            var reg=/选配/g;
                            config_info[i][1]=config_info[i][1].replace(reg,'<i class="fa fa-circle"></i>');
                            var reg=/可选/g;
                            config_info[i][1]=config_info[i][1].replace(reg,'<i class="fa fa-circle"></i>');
                            config_info_content+='<div class="index_answer_car_detail_option '+config_class+'">\
                                                    <span>'+config_info[i][0]+'</span>\
                                                    <span class="car_detail_device_option_right">'+config_info[i][1]+'</span>\
                                                    </div>'
                        }
                        if(key=="hightech_config"){
                            container_class=""
                        }else{
                            container_class="question_answer_container"
                        }
                        config_content+='<div class="question_answer">\
                                    <div class="'+container_class+'">\
                                        <div class="index_question config_detail"  index="'+index+'">\
                                            <span class="index_question_words index_question_words_car_detail">'+config_arr[key]+'</span>\
                                            <i class="fa fa-angle-up"></i>\
                                            <div class="clearfix"></div>\
                                        </div>\
                                        <div class="index_answer config_detail_option hidden" index="'+index+'">\
                                            '+config_info_content+'\
                                        </div>\
                                    </div>\
                                </div>'
                        index+=1
                    }
                    
                }
                
                var car_detail_content = '<div class="swiper-container car_detail_slide" id="car_detail_slide">\
                                                <div class="swiper-wrapper">\
                                                    '+image_content+'\
                                                </div>\
                                                <!-- 如果需要分页器 -->\
                                                <div class="swiper-pagination">\
                                                </div>\
                                                <div class="car_detail_slide_info">\
                                                    <span>图片仅供参考，以车辆配置描述为准</span>\
                                                </div>\
                                            </div>\
                                            <div class="car_detail_flag">\
                                                <div class="flag__j">\
                                                    <div class="flag_div">\
                                                        <span>指导价'+guide_price+'</span>\
                                                        <span>筋斗价'+jdc_price+'</span>\
                                                    </div>\
                                                </div>\
                                                <p class="flag_p">'+name+' '+details+'</p>\
                                            </div>\
                                            <!--分割线-->\
                                           <div class="fg"></div>\
                                            <!--期限-->\
                                           <div class="car_term">\
                                               <!--先用一年-->\
                                                <div class="A_year">\
                                                    <div class="A_year_div">\
                                                        <img src="images/bb.png" alt=""/>\
                                                        <span>先用一年</span>\
                                                    </div>\
                                                    <!--服务费,月租金.....-->\
                                                    <ul class="Service_charge">\
                                                       <li>\
                                                           <span>服务费</span>\
                                                           <span class="kk">'+first_pay+'</span>\
                                                           <i class="i_border"></i>\
                                                       </li>\
                                                        <li>\
                                                            <span>月租金</span>\
                                                            <span class="kk">'+month_pay+'元</span>\
                                                             <i class="i_border0"></i>\
                                                        </li>\
                                                        <li>\
                                                            <span>可随时尾款买断</span>\
                                                            <a class="car_detail_years_title_more">查看详情</a>\
                                                        </li>\
                                                    </ul>\
                                                    <!--优惠-->\
                                                    <ul class="Discount">\
                                                        <li>送购置税</li>\
                                                        <li>送一年保险</li>\
                                                        <li>送车牌</li>\
                                                    </ul>\
                                                </div>\
                                               <!--一年后-->\
                                                <div class="One_year_later">\
                                                    <div class="A_year_div">\
                                                        <img src="images/bb.png" alt=""/>\
                                                        <span>1年后可选</span>\
                                                    </div>\
                                                    <!--注意事项-->\
                                                    <div class="Be_careful">\
                                                        <ul class="Be_careful_item">\
                                                           <li>1.尾款购车'+next_pay+'元</li>\
                                                           <li>2.分期尾款购车('+next_month_pay+'元*36期)</li>\
                                                           <li>3.续租一年(月租金'+month_pay+'元)</li>\
                                                           <li>4.退换车辆</li>\
                                                        </ul>\
                                                    </div>\
                                                </div>\
                                           </div>\
                                            <div class="car_detail_tab">\
                                                <div class="car_detail_tab_option active">\
                                                    <a href="#car_detail_tab_content_option_content_1" style="text-align:left;"><span class="car_detail_tab_span active">车辆信息</span></a>\
                                                </div>\
                                                <div class="car_detail_tab_option">\
                                                    <a href="#car_detail_tab_content_option_content_2"><span class="car_detail_tab_span">详细配置</span></a>\
                                                </div>\
                                                <div class="car_detail_tab_option">\
                                                    <a href="#car_detail_tab_content_option_content_3" style="text-align:right;"><span class="car_detail_tab_span">购车说明</span></a>\
                                                </div>\
                                                <div class="clearfix"></div>\
                                            </div>\
                                            <div class="car_detail_tab_content">\
                                                <div class="car_detail_tab_content_option">\
                                                    <div id="car_detail_tab_content_option_content_1">\
                                                        <div class="car_detail_tab_content_option_content_title">\
                                                            <div class="car_detail_line_container"><span class="car_detail_tab_content_option_content_title_line line_left"></span></div>\
                                                            <span class="car_detail_line_title">基本配置</span>\
                                                            <div class="car_detail_line_container"><span class="car_detail_tab_content_option_content_title_line line_right"></span></div>\
                                                            <div class="clearfix"></div>\
                                                        </div>\
                                                        <div class="car_detail_device">\
                                                            '+base_info_content+'\
                                                        </div>\
                                                        <div class="car_detail_tab_content_option_content_title">\
                                                            <div class="car_detail_line_container"><span class="car_detail_tab_content_option_content_title_line line_left"></span></div>\
                                                            <span class="car_detail_line_title">配置亮点</span>\
                                                            <div class="car_detail_line_container"><span class="car_detail_tab_content_option_content_title_line line_right"></span></div>\
                                                            <div class="clearfix"></div>\
                                                        </div>\
                                                        <!--<div class="device_tips"><span>点击图片可查看详情</span></div>-->\
                                                        <div class="car_detail_device_good">\
                                                            '+config_spotlight_content+'\
                                                            <div class="clearfix"></div>\
                                                        </div>\
                                                        <div class="car_detail_tab_content_option_content_title">\
                                                            <div class="car_detail_line_container"><span class="car_detail_tab_content_option_content_title_line line_left"></span></div>\
                                                            <span class="car_detail_line_title">车型亮点</span>\
                                                            <div class="car_detail_line_container"><span class="car_detail_tab_content_option_content_title_line line_right"></span></div>\
                                                            <div class="clearfix"></div>\
                                                        </div>\
                                                        '+models_spotlight_content+'\
                                                    </div>\
                                                </div>\
                                                <div class="car_detail_tab_content_option hidden">\
                                                    <div id="car_detail_tab_content_option_content_2">\
                                                        <div class="detail_device_tips">\
                                                            <div class="detail_device_tips_options">\
                                                                <span>\
                                                                    <i class="fa fa-circle black_i"></i>\
                                                                    标配\
                                                                </span>\
                                                                <span class="gray_i">\
                                                                    <i class="fa fa-circle gray_i"></i>\
                                                                    选配\
                                                                </span>\
                                                                <span class="gray_i">- 无</span>\
                                                            </div>\
                                                            <div class="clearfix">\
                                                            </div>\
                                                        </div>\
                                                        '+config_content+'\
                                                    </div>\
                                                </div>\
                                                <!--购车说明-->\
                                                <div class="car_detail_tab_content_option hidden">\
                                                <div id="car_detail_tab_content_option_content_3">\
                                                   <dl class="dl_l">\
                                                       <dt class="dt_l">车辆归属</dt>\
                                                       <dd>前一年用车期间。车辆及车牌所有权归属筋斗车平台</dd>\
                                                       <dt class="dt_l">资料</dt>\
                                                       <dd>客户仅需拥有本人身份证（有效期内）、驾照（状态正常）无需其他资料</dd>\
                                                       <dt class="dt_l">购置税</dt>\
                                                       <dd>筋斗车方案已送购置税，您无需支付额外费用</dd>\
                                                       <dt class="dt_l">保险</dt>\
                                                       <dd>筋斗车送1年车险，含交强险、第三者责任险（30万）、车上人员责任险（司机）、车损险及以上几项险种的不计免陪险；提供盗抢险和涉水险理赔服务。如需增加其他保险险种，可联系顾问办理，增加险种费用由客户自己承担。</dd>\
                                                       <dt class="dt_l">上牌</dt>\
                                                       <dd>由筋斗车负责，客户无需自主上牌</dd>\
                                                       <dt class="dt_l">还款</dt>\
                                                       <dd>可选择预留银行卡代扣、或通过APP中的微信/支付宝端口进行手动还款</dd>\
                                                   </dl>\
                                                    <div class="car_detail_tab_content_option_content_title">\
                                                        <div class="car_detail_line_container">\
                                                            <span class="car_detail_tab_content_option_content_title_line line_left left_span"></span>\
                                                        </div>\
                                                        <span class="car_detail_line_title">只需4步爱车提回家</span>\
                                                        <div class="car_detail_line_container">\
                                                            <span class="car_detail_tab_content_option_content_title_line line_right right_span"></span>\
                                                        </div>\
                                                        <div class="clearfix"></div>\
                                                    </div>\
                                                    <!--************-->\
                                                    <ul class="mui-table-view li_k">\
                                                        <li class="mui-table-view-cell mui-media li_A">\
                                                            <a href="javascript:;" class="li_a">\
                                                                <img class="mui-media-object mui-pull-left img_kk" src="images/yuyue.png">\
                                                                <div class="mui-media-body">\
                                                                    预约到店\
                                                                    <p class="yuyue_p">在APP内选车联系我们后，我们的销售顾问会在24小时内为您安排1对1服务</p>\
                                                                </div>\
                                                            </a>\
                                                        </li>\
                                                        <li class="mui-table-view-cell mui-media li_A">\
                                                            <a href="javascript:;" class="li_a">\
                                                                <img class="mui-media-object mui-pull-left img_kk" src="images/xingyong.png">\
                                                                <div class="mui-media-body">\
                                                                    信用评估\
                                                                    <p class="">由筋斗车当地服务顾问为客户详细介绍车型和筋斗车方案确认购买意向后，通过当地顾问申请提交审核即可</p>\
                                                                </div>\
                                                            </a>\
                                                        </li>\
                                                        <li class="mui-table-view-cell mui-media li_A">\
                                                            <a href="javascript:;" class="li_a">\
                                                                <img class="mui-media-object mui-pull-left img_kk img_q" src="images/qianyue.png">\
                                                                <div class="mui-media-body">\
                                                                    签约支付服务费等待提车\
                                                                    <p class="">客户完成协议签订并支付综合费用后，筋斗车会安排上牌等相关事宜</p>\
                                                                </div>\
                                                            </a>\
                                                        </li>\
                                                        <li class="mui-table-view-cell mui-media li_A">\
                                                            <a href="javascript:;" class="li_a">\
                                                                <img class="mui-media-object mui-pull-left img_kk" src="images/daodian.png">\
                                                                <div class="mui-media-body">\
                                                                    到店提车\
                                                                    <p class="">上牌结束后即可自主提车结束流程</p>\
                                                                </div>\
                                                            </a>\
                                                        </li>\
                                                     </ul>\
                                                </div>\
                                                </div>\
                                            </div>'
                        $('.car_detail_content').html(car_detail_content)
                        bindEvent_car_detail()
                        getSalePhone();
                        check_collect()
                        mui('.mui-scroll-wrapper').scroll({
                            deceleration: 0.005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006 
                        });

            }

        },
        error:function(){
            var content='<div class="service_no_car_tip">\
                            <img src="images/off_the_net.jpg">\
                            <span>网络出错了</span>\
                            <div class="go_buy_car_container">\
                                <a class="go_buy_car refuse_car_detail">\
                                    刷新\
                                </a>\
                            </div>\
                        </div>'
            $('.car_detail_content').html(content)  
            $('.refuse_car_detail').click(function(){
                getDetailDate(carNum);
            })
        }
            
    });   
} 
function getSalePhone(){
    var mobilephone=getLoginPhone();
    if(!mobilephone){
        $('.kefe_tel').attr('href',"#");
        $('.kefe_tel').addClass('goto_login');
        return;
    }
    var waynum=getWayNum();
    if(waynum){
        $.ajax({
            type: "POST",
            url: webConfig.url+"/Home/Login/getSalePhone",
            data: {waynum:waynum},
            dataType: "JSONP",
            crossDomain: true,
            success: function(data){
                if(data && data.tel){
                    $('.kefe_tel').attr('href',"tel:'"+data.tel+"'")
                }
            } 
        })

    }else{
        $('.kefe_tel').attr('href',"tel:'"+webConfig.kefuTel+"'")
        if($('.kefe_tel').hasClass('goto_login')){
            $('.kefe_tel').removeClass('goto_login');
        }
    }
}
$("body").delegate(".goto_login","click",function(){
    var mobilephone=getLoginPhone();
    if(!mobilephone){
        if($('#login_first_step_page').length>0){
            $('#login_first_step_page').remove()
        }
        $("body").append(html_content.login_first_step);
        bindEvent_login_first_step();
        $("#"+page_index[page_index.length-1]).hide();
        $("#login_first_step_page").show();
        page_index.push("login_first_step_page");
        $('body').attr('class','search_body')
        return;
    }
});
function check_collect(){
    var mobilephone=getLoginPhone();
    if(!mobilephone){
        return;
    }
    var collect=getCollect();
    if(collect){
        var collect_arr=collect.split(',');
        if(isInArray(collect_arr,carNum)){
            $('.collect_car').attr('src',"images/aixing1.png")
            $('.collect_car').attr('collect',"1")
        }
    }
}
$("body").delegate(".collect_car","click",function(){
    var mobilephone=getLoginPhone();
    if(!mobilephone){
        if($('#login_first_step_page').length>0){
            $('#login_first_step_page').remove()
        }
        $("body").append(html_content.login_first_step);
        bindEvent_login_first_step();
        $("#"+page_index[page_index.length-1]).hide();
        $("#login_first_step_page").show();
        page_index.push("login_first_step_page");
        $('body').attr('class','search_body')
        return;
    }

    if($(this).attr('collect')=="0"){
        
        $.ajax({
            type: "POST",
            url: webConfig.url+"/Home/Index/addCollect",
            data: {mobilephone:mobilephone,carnum:carNum},
            dataType: "JSONP",
            crossDomain: true,
            success: function(data){
                localStorage.setItem('collect',data); 
                mui.toast('收藏成功')
                $('.collect_car').attr('src',"images/aixing1.png")
                $('.collect_car').attr('collect',"1")
                bindEvent_mine_collect()
            } 
        })
    }else{
        
        $.ajax({
            type: "POST",
            url: webConfig.url+"/Home/Index/delCollect",
            data: {mobilephone:mobilephone,carnum:carNum},
            dataType: "JSONP",
            crossDomain: true,
            success: function(data){
                localStorage.setItem('collect',data); 
                mui.toast('取消收藏成功')
                $('.collect_car').attr('src',"images/aixing.png")
                $('.collect_car').attr('collect',"0")
                bindEvent_mine_collect()
            } 
        })
    }
});